<template>
  <div class="home">
    <el-container>
      <div class="header_box">
        <el-header>
          <el-menu
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
          >
            <el-menu-item
              @click="
                $router.push(item.path).catch((err) => {
                  err;
                })
              "
              v-for="(item, index) in navList"
              :key="index"
              :index="item.path"
              >{{ item.meta.title }}</el-menu-item
            >
          </el-menu>
          <div class="avatar">
            <el-dropdown v-if="isAvatar">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>修改资料</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <p v-else style="padding-top: 16.5px">
              <el-link :underline="false" href="/login?option=login"
                >登录</el-link
              >
            </p>
          </div>
        </el-header>
      </div>
      <el-main> <router-view></router-view> </el-main>
      <el-footer> </el-footer>
    </el-container>
  </div>
</template>
<script>
import "../style/home/index.scss";
export default {
  data() {
    return {
      isAvatar: window.localStorage.getItem("token"),
    };
  },
  computed: {
    // 导航菜单数据
    navList: function () {
      return this.$router.options.routes[0].children.filter( item => item.meta.isNav != false )
    },
  },
  methods: {
    // 登出
    logout() {
      window.localStorage.clear();
    },
  },
};
</script>